<template>
  <div class="school">
    <h1>学校名称:{{ name }}</h1>
    <h1>学校地址:{{ address }}</h1>
    <h2>学生姓名:{{ studentName }}</h2>
  </div>
</template>
<script>
export default {
  name: "School",
  data() {
    return {
      name: "B站大学",
      address: "家里蹲",
      studentName: "",
    };
  },

  mounted() {
    this.$bus.$on("hello", (data) => {
      console.log("我是School组件,收到了数据", data);
      this.studentName = data;
    });
  },
  // 总线定义的自定义事件用完就得调钩子销毁
  // 为什么没有使用总线定义的自定义事件不需要单独销毁呢?
  // 因为没有使用总线的组件如果走了销毁流程 那也就意味这组件实例都没了他下面的自定义事件、指令、逻辑还会有吗？
  // 总线定义自定义事件不一样,因为事件是绑定在Vue的原型上的$bus属性,你走销毁流程销毁的肯定是组件,不可能是Vue吧 也可能去销毁Vue,所以为了避免$bus上的事件太多,在使用完后都要走销毁流程解绑这个事件
  //注意:调用$off方法,千万要记得指定事件名,如果无参数那么就是解绑所有自定义事件了,就出事了就,切记)
  beforeDestroy() {
    this.$off("hell");
  },
};
</script>

<style scoped>
.school {
  background-color: blueviolet;
}
</style>